<template>
  <!--收藏-->
  <div class="container-box">
    <div class="cart-box">
      <el-card  v-if="!showProductDetail" style="width: 80%" >
        <el-row class="flex-center">
          <h3> 我的收藏</h3>

        </el-row>

        <el-row>
          <div class="address-container">
            <el-table :border="true" :data="favoriteList" tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column align="center" label="商品主图" prop="pictures" width="120">
                <template v-slot="{ row }">
                  <img @click="gotoDetail(row)" :src="JSON.parse(row.pictures)[0]" alt=""
                    style="width: 80px;height: auto;cursor: pointer;">
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" prop="product_name" width="120">
              </el-table-column>
              <el-table-column align="center" prop="category_name" label="商品分类" width="120">
              </el-table-column>
              <el-table-column align="center" prop="product_description" label="商品描述">
              </el-table-column>
              <el-table-column align="center" prop="stock" label="库存(件)" width="120">
              </el-table-column>
              <el-table-column align="center" prop="price" label="价格(元)">
              </el-table-column>
              <el-table-column align="center" width="80" label="操作">
                <template v-slot="{ row }">

                  <el-link style="margin-left:10px" :underline="false" type="danger"
                    @click="deleteFavoritesById(row)">取消</el-link>
                </template>
              </el-table-column>
            </el-table>

          </div>
        </el-row>
      </el-card>

      <div v-if="showProductDetail">
        <el-button style="margin: 20px" type="primary" @click="goback">返回</el-button>
        <el-row>
          <ProductDetail  class="product-detail" :productInfo="productInfo"></ProductDetail>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { getAllFavoritesByUserId, addFavorites, deleteFavoritesById } from "@/api/user";
import ProductDetail from "@/views/productDetail/index.vue";
export default {
  components: {
    ProductDetail
  },
  data() {
    return {


      favoriteList: [],
      addVisible: false,
      showProductDetail: false,
      productInfo:null

    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters(["sidebar", "avatar", "name"]),

  },
  mounted() {
    this.getAllFavoritesByUserId();
  },
  methods: {
   async goback(){
     await this.getAllFavoritesByUserId();
      this.showProductDetail = false
    },
    gotoDetail(row) {
      this.showProductDetail = true
      this.productInfo = row
    },
    async getAllFavoritesByUserId() {
      if (!this.token) {
        this.$message.warning("请先登录！");
        return this.$router.push('/login')
      }
      const { data: res } = await getAllFavoritesByUserId(+this.token);

      this.favoriteList = res || []
    },


    deleteFavoritesById(row) {
      this.$confirm('确认取消收藏吗？ 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteFavoritesById(row.favorite_id)
        if (res.status === 0) {
          this.$message({
            type: "success",
            message: "取消收藏成功"
          });
          this.getAllFavoritesByUserId()
        } else {
          this.$message.error("取消收藏失败");
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cart-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;

  .el-card {
    padding: 20px;

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;

    }
  }
}

.btn-list {
  display: flex;
  justify-content: center;

  .el-button {
    width: 200px;
  }
}

.product-detail {
  background-color: #fff;
}

.total-price {
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;

  .total {
    margin-right: 20px;

    .price {
      color: red;
      font-size: 20px;
    }
  }
}
</style>